<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!-- <a-breadcrumb>
        <a-breadcrumb-item>营销</a-breadcrumb-item>
        <a-breadcrumb-item>
          <a href="javascipt:;" @click="$router.push({ name: 'VerifyList' })">卡劵</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>卡劵详情</a-breadcrumb-item>
      </a-breadcrumb> -->
      <a-page-header title="卡券详情" @back="() => $router.go(-1)">
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="卡卷名称"> {{ cardData.name }} </a-descriptions-item>
          <a-descriptions-item label="卡劵类型"> {{ typeText }} </a-descriptions-item>
          <a-descriptions-item label="创建时间"> {{ cardData.created_at }} </a-descriptions-item>
          <a-descriptions-item label="已发放数量"> {{ cardData.send_times }} </a-descriptions-item>
          <a-descriptions-item label="有效时间"> {{ dateText }} </a-descriptions-item>
          <a-descriptions-item label="卡密数量"> {{ cardData.num }} </a-descriptions-item>
        </a-descriptions>
      </a-page-header>
      <!-- 核销卡 -->
      <div v-if="parseInt(cardData.type) <= 1">
        <h3 style="">卡劵内容</h3>

        <a-row class="m-b-20"> 核销次数：{{ cardData.use_num }} </a-row>
        <a-divider />
      </div>

      <div>
        <h3 style="">领取记录</h3>
        <!-- 核销卡 -->
        <STable
          v-if="parseInt(cardData.type) <= 1"
          :rowKey="
            (r, i) => {
              return r.id
            }
          "
          ref="table"
          :columns="columns1"
          :data="loadData"
        >
          <span class="flex" slot="nickname" slot-scope="nickname, item">
            <img
              :src="item.avatar_url"
              style="width: 45px; height: 45px; border-radius: 5px; margin-right: 10px"
              alt=""
            />
            <div>
              <div>{{ nickname }}</div>
              <div>{{ item.platform }}</div>
            </div>
          </span>
          <span> </span>
        </STable>

        <!-- 除核销卡的卡劵 -->
        <STable
          v-if="parseInt(cardData.type) > 1"
          :rowKey="
            (r, i) => {
              return r.id
            }
          "
          ref="table"
          :columns="columns2"
          :data="loadData"
        >
          <span class="flex" slot="nickname" slot-scope="nickname, item">
            <img
              :src="item.avatar_url"
              style="width: 45px; height: 45px; border-radius: 5px; margin-right: 10px"
              alt=""
            />
            <div>
              <div>{{ nickname }}</div>
              <div>{{ item.platform }}</div>
            </div>
          </span>
          <span slot="card_info" slot-scope="text">
            <div>卡劵卡号：{{ text.account }}</div>
            <div>卡劵密码：{{ text.password }}</div>
          </span>
        </STable>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { verifyDetail, createCard,exportCard } from '@/api/marketing'
const goodsColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '商品信息',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '商品类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '售价',
    dataIndex: 'price',
    scopedSlot: { customRender: 'price' },
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '库存',
    dataIndex: 'goods_num',
    scopedSlot: { customRender: 'goods_num' },
    sorter: (a, b) => a.goods_num - b.goods_num,
  },
]

const videoColumns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },

  {
    title: '视频信息',
    dataIndex: 'pic_url',
    scopedSlots: { customRender: 'pic_url' },
  },
]

const columns1 = [
  {
    title: '用户信息',
    dataIndex: 'nickname',
    scopedSlots: { customRender: 'nickname' },
  },

  {
    title: '剩余次数',
    dataIndex: 'left_num',
    sorter: (a, b) => a.left_num - b.left_num,
  },
  {
    title: '核销次数',
    dataIndex: 'use_num',
    sorter: (a, b) => a.use_num - b.use_num,
  },
  {
    title: '领取时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
    sorter: (a, b) => a.created_at - b.created_at,
  },
]
const columns2 = [
  {
    title: '用户信息',
    dataIndex: 'nickname',
    scopedSlots: { customRender: 'nickname' },
  },
  {
    title: '卡密信息',
    dataIndex: 'card_info',
    scopedSlots: {
      customRender: 'card_info',
    },
  },
  {
    title: '领取时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at',
    },
    sorter: (a, b) => a.created_at - b.created_at,
  },
]
export default {
  data() {
    return {
      // 商品table规则
      goodsColumns,
      // 视频table规则
      videoColumns,
      // 领取记录规则
      columns1,
      columns2,
      card_id: '', // 卡劵id
      cardData: {
        type: 5,
      }, // 当前卡劵数据
      loadData: async (params) => {
        console.log(params)
        var formData = Object.assign(params, { key: this.card_id })
        const res = await verifyDetail(formData)
        if (res.code != 0) return
        this.cardData = res.data

        return res.list
      },
      // 生成卡券的数量
      num: 1
    }
  },
  methods: {
    // 点击生成卡券
    async creatCard() {
      console.log(this.num)
      if (this.num && this.num > 0) {
        console.log('生成卡券')
        const res = await createCard({ num: this.num, key: this.card_id })
        if (res.code == 0) {
          this.visible = false
          this.$refs.table.refresh(true)
        }
      }
    },
    // 关闭弹窗
    closeModel() {
      this.num = 1
    },
    // 点击导出卡密
    async exportPass () {
      window.open('/index.php?r=admin/marketing/export&key=' + this.card_id)
    }
  },
  created () {
    this.card_id = this.$route.query.id
  },
  components: {
    STable,
  },
  computed: {
    typeText() {
      const type = parseInt(this.cardData.type)
      if (type < 2) {
        return '核销卡'
      } else if (type == 2) {
        return '礼品卡'
      } else if (type == 3) {
        return '储值卡'
      } else if (type == 4) {
        return '卡密卡'
      } else if (type == 5) {
        return '视频卡'
      }
      return ''
    },
    dateText() {
      if (this.cardData.date_type == 1) {
        return `领取后${this.cardData.expire_day == 0 ? '永久有效' : this.cardData.expire_day + '天有效'}`
      } else if (this.cardData.date_type == 2) {
        return `${this.cardData.begin_time}至${this.cardData.end_time}`
      }
      return ''
    },
  },
}
</script>

<style lang="less" scoped>
h3 {
  margin: 20px 0;
  font-size: 16px;
  font-weight: 600;
}
.m-b-20 {
  margin-bottom: 20px;
}
</style>
